<template>
  <div>
    <div class="whiteBac mt10 p10">
      <router-link :to="{ name: 'shoppingEditPage',query:{goodsNum:'add'}}">
        <el-button size="small" type="primary">新增</el-button>
      </router-link>
    </div>
    <div class="whiteBac mt20 p10">
      <div class="p10">
        <el-form ref="searchForm" :model="searchForm" label-width="80px">
          <el-form-item label="商品状态">
            <el-select v-model="searchForm.typeSearch" placeholder="请选择活动区域" @change="queryGoodsList(1)">
              <el-option label="全部" value=""></el-option>
              <el-option label="上架" value="1"></el-option>
              <el-option label="下架" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          label="商品序号">
          <template slot-scope="scope">
            <router-link class="blue-color" :to="{ name: 'shoppingView',query:{goodsSerialNumber:scope.row.id}}">{{scope.row.goods_num}}</router-link>
          </template>
        </el-table-column>
        <el-table-column
          label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.img_url" width="80" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称">
        </el-table-column>
        <el-table-column
          prop="integral"
          label="商品积分">
        </el-table-column>
        <el-table-column
          label="经纪商">
          <template slot-scope="scope">
            <div v-for="item in isAgent">
              <span v-if="item.agent_num===scope.row.agent_num">{{item.name}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="商品状态">
          <template slot-scope="scope">
            <span>{{scope.row.status==='0'?"下架":"上架"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="商品类型">
          <template slot-scope="scope">
            <span>{{scope.row.type==='0'?"实物":"虚拟"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sale_count"
          label="已售件数">
        </el-table-column>
        <el-table-column
          prop="publish_time"
          width="160px"
          label="发布时间">
        </el-table-column>

        <!---->
        <!--<el-table-column-->
          <!--label="商品简介">-->
          <!--<template slot-scope="scope">-->
            <!--<div class="overflow nowrap">{{scope.row.simple_desc}}</div>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!---->

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editShopping(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="handleType(scope.row.status,scope.row.id)">{{scope.row.status==='0'?"上架":"下架"}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt10 tc">
        <page-pagination :page="page" :pageSize="pageSize" :total="total" v-on:pageFun="handleCurrentChange"></page-pagination>
      </div>
    </div>
  </div>

</template>

<script>
  import service from '@/service/index'
  import { getCookie } from '@/base/utils'
  import pagePagination from '@/components/AG_Common/pagePagination.vue'
  export default {
    data(){
      return{
        tableData:[],
        isAgent:getCookie("agentList")||[],
        searchForm:{
          typeSearch:''
        },
        total:0,
        pageSize:10,
        page:1,
      }
    },
    mounted() {
      this.queryGoodsList(1);
    },
    components:{
      pagePagination
    },
    methods:{
      isAgentName(){
        if(this.isAgent!==undefined){
          for(let i;i<=this.isAgent.length;i++){

          }
        }
      },
      handleCurrentChange(val){
        this.queryGoodsList(val);
      },
      handleType(status,id){
        //上架下架操作
        let tips;
        status==='0'?(tips="此操作将上架该商品, 是否继续?"):(tips="此操作将下架该商品, 是否继续?");
        this.$confirm( tips , '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let statusType;
          status==='0'?statusType='1':statusType='0';
          let params = {
            id:id,
            status:statusType
          }
          //console.log(JSON.stringify(params));
          service.haiBeiServerUpdateGoodsStatus(params).then(res => {
            if (res.success) {
              this.queryGoodsList(1);
              this.$message({type:'success', message:res.msg});
            }else{
              this.$message({type:'error', message:res.msg});
              return;
            }
          });

        }).catch(() => {});
      },
      queryGoodsList(page=1){
        let params = {
          status:this.searchForm.typeSearch,
          goods_num:'',
          name:'',
          type:'',
          page:page,
          pageSize:this.pageSize
        }
        service.haiBeiServerQueryGoodsList(params).then(res => {
          if (res.success) {
            this.page = res.result.page;
            this.total = res.result.nums;
            this.tableData = res.result.pageList;
            //this.$message({type:'success', message:res.msg});
          }else{
            this.$message({type:'error', message:res.msg});
            return;
          }
        });
      },
      editShopping(goodsNumber){
        this.$router.push({name:'shoppingEditPage',query:{goodsNum:goodsNumber}});
      },
    }
  }
</script>

<style scoped>

</style>
